<script>
// 组名编辑弹窗
import { defineComponent } from 'vue'
export default defineComponent({
  components: { Cropper },
	name: 'UpdateGroupDialog'
})
</script>
<script setup>

import { ref,defineExpose,reactive } from 'vue'
import { toRaw } from '@vue/reactivity';
import { ElMessageBox } from 'element-plus'
import Cropper from '@/components/app/cropper.vue';
const dialogVisible = ref(false)
const form = ref()
let initForm = {}
const formRef = ref()
const show = (val)=>{
  dialogVisible.value = true;
  initForm = toRaw(val)
  form.value = initForm
}
const handleClose = (done) => {
  dialogVisible.value = false;
}
const onSubmit =  (formEl) => {
  console.log('aaaaaaaaaaaaaaaaaaaaaaa')
  // if (!formEl) return
  // formEl.validate((valid) => {
  //   if (valid) {
      initForm = Object.assign(initForm,toRaw(form))
      console.log(initForm,'保存组名接口')
    // } else {
    //   console.log('error submit!')
    //   return false
    // }
  // })
}
const rules = reactive({
  name: [
    { required: true, message: '请输入分组名称', trigger: 'blur' },
    { min: 1, max: 18, message: '不得超过18个字', trigger: 'blur' },
  ],
})
const change = (e) => {};
defineExpose({
  show
});
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="修改名称"
    width="70%"
    :before-close="handleClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <Cropper :imgurl="form.url" />
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"
          >保存</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
